<template>
  <div class="root" style="height: 100%">
    <!--    <div style="position:absolute;left: 40%;top:10%;z-index:5;">-->
    <!--      <label>坐标</label>-->
    <!--      <input type="text" :value="position" style="width: 200px;z-index: 5">-->
    <!--    </div>-->
    <div class="banner">
      <div style="height: 10%">

      </div>
    </div>

    <div class="btnGroup">
      <div class="areaInfos">
        <label for="" style="color: white;background: rgba(0,0,0,.5);font-size: 30px;">坐标信息</label>
        <div v-if="drawer.polygon" style="height: 20vh;width: 15vw;background: rgba(0,0,0,0.5);color: white;font-size: 16px;overflow: auto;overflow-x: hidden;">
          <div v-for="(item,index) in drawer.polygon" :key="index" >
            <span style="cursor: default;">{{item}}</span><br>
          </div>
        </div>
        <div >

        </div>

      </div>
      <template v-if="drawer.mode === 'none'" >
        <div style="display: flex;text-align: center;width: 15vw;">
          <span @click="drawStart" style="background: rgba(0,0,0,.5);font-size: 16px;width: 50%;padding: 5px;cursor: pointer;">开始绘制</span>
          <span @click="drawClear" style="background: rgba(0,0,0,.5);font-size: 16px;width: 50%;padding: 5px;cursor: pointer;">清除绘制</span>
        </div>
        <div style="display: flex;align-items: center;margin: 5px 0">
          <span></span>
          <el-color-picker v-model="color" show-alpha >

          </el-color-picker>
          <span style="color: yellow" v-show="!color">单击左边方框选择填充颜色</span>
        </div>
        <div @click="submitPosition" style="width:15vw;font-size: 24px;background: rgba(0,0,0,.5);margin: 10px 0;cursor: pointer;"><span>提交坐标</span></div>
      </template>
      <template v-else>
        <span @click="drawer.mode = 'none'" style="background: rgba(0,0,0,.5);font-size: 18px;padding: 5px;">取消</span>
      </template>
    </div>
    <div class="amapContainer">
      <amap
          cache-key="map"
          ref="map"
          view-mode="3D"
          map-style="amap://styles/whitesmoke"
          async
          :zoom.sync="geography.zoom"
          :center.sync="geography.center"
          :show-indoor-map="false"
      >
<!--        @click="mapClick(1,$event)"-->
        <amap-satellite-layer/>
        <amap-road-net-layer/>
        <amap-traffic-layer/>
<!--        clear-when-close-->
        <amap-mouse-tool
            :mode.sync="drawer.mode"
            @draw="onDraw"
        />
<!--        <amap-polygon-->
<!--            v-for="(item) in farms"-->
<!--            :key="item.id"-->
<!--            :path.sync="item.position"-->
<!--            :fill-color="item.fill"-->
<!--            :fill-opacity="item.isSelected?0.7:0.3"-->
<!--            :stroke-color="item.color"-->
<!--            :strokeWeight="0"-->
<!--            cursor="pointer"-->
<!--        >-->
<!--        </amap-polygon>-->
        <div >
          <amap-polygon
              v-for="(item,index) in areas"
              :key="index"
              :path.sync="item.coordinate"
              :fill-color="item.color"
              :fill-opacity="item.isSelected?0.8:0.2"
              :stroke-color="item.color"
              :strokeWeight="0"
          >
<!--            cursor="pointer"-->
          </amap-polygon>
        </div>
      </amap>
    </div>

  </div>
</template>

<script>
import {getArea, getFarmer,areaEdit} from "@/net";

export default {
  name: 'AreaEdit',
  components: {},

  data() {
    return {
      geography: { // 加载初始地理数据
        center: [120.029933, 30.0691],
        position: [120.029769, 30.068075],
        zoom: 17,
        pitch: 45,
        rotation: 15,
      },
      areaId: null,//当前地块id

      timer1:null,// 定时器1
      timer2: null,
      mode: 'none',//默认鼠标工具模式定义
      position: null,
      drawer:{
        mode: 'none',//默认鼠标工具模式定义
        fillColor: 'raba(0,245,255,0.8)',
        polygon: null,// 多边形坐标
      },
      color: '',// 选择的颜色
      activeName: 'first',
      currentPosition:[],
      farms: null,
      farmerIdCollection: [],
      areas:[],// 保存区域信息
    }
  },
  methods: {

    getFarmerId(){ // 获取农户id
      const farmerIdCollection = this.farmerIdCollection
      this.farmers.forEach(function (item){
        farmerIdCollection.push(item.id)
      })
      console.log(farmerIdCollection);
    },
    async getFarmerInfo(){ // 获取农户信息

      const token = '2a0bd04a-81b4-4be0-a4ce-f0b858eaef74'
      let res = await getFarmer(token);
      console.log(res)
      if (res.request.status === 200) {
        this.farmers = res.data.results //  获取到数据数组
        console.log(this.farmers)
        this.getFarmerId(); // 提取农户id到数组
        await this.getAreaInfos();

      }
    },
    async submitInfo(){ // 发送提交信息到指定地址

      const token = '2a0bd04a-81b4-4be0-a4ce-f0b858eaef74'
      let id = this.areaId
      // console.log(id)
      //id,测试用4
      let res= await areaEdit(token,id,this.color,this.drawer.polygon)
      if (res.request.status===200){
        console.log('发送成功')
        this.$message({
          type:'success',
          message: '提交成功'
        })
        this.timer2=setTimeout(()=>{
          this.$router.go(0); // 刷新页面
        },1000)

      }else{
        this.$message({
          type: 'error',
          message: '网络错误,提交失败'
        })
      }
    },
    async getAreaInfos(){ // 获取区域信息
      // const token = document.cookie;
      // let a = token.substring(9);
      const token = '2a0bd04a-81b4-4be0-a4ce-f0b858eaef74'
      const farmerIdCollection=this.farmerIdCollection;
      const areas = this.areas;

      for (let i=0;i<farmerIdCollection.length;i++){ // 获得农户id
        let res = await getArea(token,farmerIdCollection[i]);
        console.log(res)
        if(res.request.status === 200){
          let temp = res.data.results;// 单个对象数组
          const id = this.areaId; // 获取当前区域id
          temp.forEach(function (item){
            // item.fill='rgb(204,27,27)';  // 添加属性
            // item.color='#000A58';
             (id===item.id )?item.isSelected=true:item.isSelected=false;
              item['person_detail'].sex=temp[0]['person_detail'].sex.substring(0,1) // 去掉男性中的性字
              areas.push(item)// 推入对象


          })
          // console.log(areas)
        }
      }
    },
    init() {
      this.getId(); // 获取当前id
      this.getFarmerInfo(); // 初始化获取农户信息
      this.getAreaInfos(); // 初始化获取区域信
      // this.getId(); // 获取当前id
    },
    onDraw(type, res) {
      console.log(res);
      this.drawer.type = type;
      this.drawer[type] = res;
      this.drawer.mode = 'none';
    },
    drawStart(){ // 开始绘制
      this.drawer.polygon = null;
      this.drawer.mode='polygon';
    },
    drawClear(){ // 清除绘制
      this.drawer.polygon=null;
    },
    getId(){
      const url = this.$router.history.current.query // 获得网址
      // console.log(url);
     this.areaId = Number(url.area)

      // console.log(id);
      // console.log(this.$router)
    },
    submitPosition(){ // 提交坐标
      // console.log(this.drawer)
      // this.getId();
      if(this.drawer.polygon===null){
        this.$message({
          message: '请先单击开始按钮选择地块',
          type: 'warning'
        })
      }else if (this.drawer.polygon.length>2){

        if (this.color===''){
          this.$message({
            message: '未选择颜色',
            type: 'error'
          });
        }else{
          this.$message({
            message: '检验成功',
            type: "success"
          })
          const that = this
          this.timer1=setTimeout(function (){
            that.submitInfo();
          },2000)
        }
      } else{
        this.$message({
          message: '坐标组不合法，至少需要三个点',
          type: 'warning',
        })
      }
    },

  },

  mounted() {
    this.init();
  },
  beforeDestroy() {
    clearTimeout(this.timer1) // 清空定时器
    clearTimeout(this.timer2) //
  }
}
</script>
<style scoped lang="scss">

.root {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  .btnGroup {
  position: absolute;
    z-index: 5;
    top: 20%;
    right: 10%;
    .areaInfos{
      margin-bottom: 20px;
    }
    span{
  //background: #39b635;
  color: white;
      //font-size: 30px;
  //padding: 0 10px;
  margin: 0 10px;
      //cursor: pointer;
}
    button{
    }
}

  .amapContainer {
    width: 100%;
    height: 100%;
  }

  .banner {
    color: #dcdcdc;
    width: 100%;
    height: 8%;
    z-index: 5;
    text-align: center;
    position: absolute;

    .box {
      position: absolute;
      top: 30%;
      right: 5%;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.5);
      padding: 10px;

      .iconBack {
        font-size: 20px;
      }
    }

    .menu-logo-tool {
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5) 60%;
      position: absolute;
      right: 7%;
      top: 15%;

      i {
        font-size: 1.8vw;
      }
    }

    .menu-logo-layer {
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5) 60%;
      position: absolute;
      right: 4%;
      top: 15%;
      align-items: center;

      i {
        font-size: 1.8vw;
        align-items: center;
      }
    }

  }

}


</style>
